<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Moon, Sunny, Search, } from '@element-plus/icons-vue'
import { useDark, } from '@vueuse/core'
import { useRouter } from 'vue-router';
import MobileMuen from '@/components/MobileMuen.vue'
const activeIndex = ref('/')
const isDark = useDark()
const Searchvalue = ref('')
const navShow = ref(true)
const router = useRouter()
const top = ref()
watch(() => router.currentRoute.value.path, (newValue, oldValue) => { // activeIndex路由改变展示问题
    activeIndex.value = newValue
}, { immediate: false })
window.addEventListener('scroll', () => {
    top.value = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
})

watch(top, (newValue, oldValue) => {
    // 监听top值的变化
    // 等新值大于100的时候再做变化（优化一下）
    if (newValue > 200) {
        if (newValue > oldValue) {
            navShow.value = false
        } else {
            navShow.value = true
        }
    }else{
        navShow.value = true
    }
}, {
    immediate: true,
});
</script>
<template>
    <div class="topheader">


    <div id="nav-bar" :class="navShow ? 'navOn' : 'navOff'">


        <el-menu :default-active="activeIndex" class="el-menu-demo header" mode="horizontal" :ellipsis="false"
            :router="true"><img @click.stop="router.push('/')" style="width: 56px; height:56px" src="../assets/logo.png" />
                <el-menu-item index="/">首页</el-menu-item>
                <el-menu-item index="/archives">归档</el-menu-item>
                <el-menu-item index="/sort">分类</el-menu-item>
                <el-menu-item index="/tag">标签</el-menu-item>
                <el-menu-item index="/friend">友链</el-menu-item>
                <el-menu-item index="/about">关于</el-menu-item>
                <div class="flex-grow" />
                <div class="tool">
                    <!-- 搜索框 -->
                    <!-- <el-input v-model="Searchvalue" placeholder="Please input" class="input-with-select">
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input> -->
                    <!-- 夜间模式按钮 -->
                    <el-switch v-model="isDark" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Sunny"
                        :inactive-icon="Moon" />

                    <!-- <el-dropdown>
                        <el-button type="primary">
                            切换语言<i class="el-icon-arrow-down el-icon--right" />
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="zhCn">
                                    中文
                                </el-dropdown-item>
                                <el-dropdown-item command="en">
                                    English
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown> -->
                </div>

            </el-menu>
        </div>
        <MobileMuen />
    </div>
</template>
  


<style lang="scss" scoped>
:deep(.el-switch.is-checked .el-switch__core){
    background-color:unset ;
}
.muenheader,
.header {
    padding: 0 50px;
    user-select:none;
    .flex-grow {
        flex-grow: 1;
    }

    .tool {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .el-switch {
            margin: 0 !important;
        }

        div {
            margin: auto 10px;
        }
    }
}
img{
    cursor:pointer;
}
:deep(.el-switch) {
    --el-switch-on-color:unset;
}
.topheader {
    position: relative;
    height: 60px;
}

// css样式
.navOn {
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    transition: all 0.2s ease-in-out 0.2s;
    transform: translateZ(0);
   background-color: var(--el-bg-color-overlay);
}

.navOff {
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    transition: all 0.2s ease-in-out 0.2s;
    transform: translate3d(0, -100%, 0);
}

@media only screen and (max-width: 800px) {

    .header {
        display: none;
    }
}</style>